<template>
    <div>
        <vxe-table
            :loading="loading"
            ref="xTable"
            highlight-hover-row
            style="width: 100%"
            class="text-center"
            show-footer
            :footer-method="footerMethod"
            :max-height="maxHeight">
            <vxe-table-column title="日期" field="dataDay" min-width="120" fixed="left"/>
            <vxe-table-column title="注册人数" field="registerUser" formatter="formatHuman" min-width="80"/>
            <vxe-table-column title="推广费" field="spreadCost" formatter="formatHumanRmb" min-width="110"/>
            <vxe-table-column title="充值金额" field="pay" formatter="formatHumanRmb" min-width="90"/>
            <vxe-table-column title="兑换积分" field="thirdExchange" :formatter="['formatW', 1]" min-width="90"/>
            <vxe-table-column title="充值人数" field="payUser" formatter="formatHuman" min-width="80"/>
            <vxe-table-column title="积分人数" field="thirdExchangeUser" formatter="formatHuman" min-width="80"/>
<!--            <vxe-table-column title="平台情况" field="platformProfit" formatter="formatHumanRmb" :title-help="{message: '充值'}" min-width="100"/>-->
            <vxe-table-column title="充值-推广费" field="pay-spreadCost" formatter="formatHumanRmb" min-width="140">
                <template #default="{row}">{{ $helper.formatHumanRmb(row.pay-row.spreadCost) }}</template>
            </vxe-table-column>
<!--            <vxe-table-column title="净利润" field="normalProfit" formatter="formatHumanRmb" :title-help="{message: '充值 - 推广费'}" min-width="100"/>-->
            <vxe-table-column title="市场ROI" field="roiMarket" :formatter="['formatPercent', 2]" min-width="80"/>
            <vxe-table-column title="实际ROI" field="roi" :formatter="['formatPercent', 2]" min-width="80"/>
        </vxe-table>

        <detail-roi-chart :data="tableData"></detail-roi-chart>
    </div>
</template>

<script>
import VXETable from "vxe-table";
import DetailRoiChart from "./detail-roi-chart";

export default {
    props: {
        search: {
            source: '',
            day: [],
        }
    },
    components: {
        DetailRoiChart,
    },
    data() {
        return {
            loading: false,
            selected: [],
            tableData: [],
            pageNo: 1,
            pageSize: 50,
            totalDataNumber: 0,
            pageOptions: this.$store.state.backend.pageOptions,
            pageCount: 0,
            options: this.$store.state.operation.options.bulletLog,
            footer: {},
        }
    },
    computed: {
        maxHeight() {
            return this.$store.state.backend.windowInnerHeight - 220;
        },
    },
    methods: {
        handleSizeChange(val) {
            this.pageNo = 1;
            this.pageSize = parseInt(`${val}`);
            this.handleSearch();
        },
        handleCurrentChange(val) {
            this.pageNo = parseInt(`${val}`);
            this.handleSearch();
        },
        handleSelectionChange(val) {
            this.selected = val;
        },
        handleSearch() {
            this.loading = true;
            let filter = Object.assign({}, this.search, {
                page: this.pageNo,
                pageSize: this.pageSize,
            });
            this.$store.dispatch('spreadData/SourceLtvDetail', filter).then(({data}) => {
                this.footer = data.footer;
                this.tableData = data.data;// 供图表用
                this.$refs.xTable.reloadData(data.data)
                // this.totalDataNumber = data.meta.total;
            }).finally(() => {
                this.loading = false;
            });
        },
        initData() {
            this.handleSearch();
        },
        exportExcel () {
            this.$refs.xTable.exportData({
                filename: '推广数据-' + this.$route.meta.title,
                type: 'xlsx'
            })
        },
        footerMethod({columns, data}) {
            return this.$helper.vxeFooter(columns, data, (index, property) => {
                return index < 2;
            }, (sums, allFields) => {
                // 计算 实际roi
                sums[allFields.roi] = sums[allFields.spreadCost] ? (sums[allFields.pay]-sums[allFields.thirdExchange]/this.$CURRENCY_HB_SCALE*100) / sums[allFields.spreadCost] : 0;
                // 计算 市场roi
                sums[allFields.roiMarket] = sums[allFields.spreadCost] ? sums[allFields.pay] / sums[allFields.spreadCost] : 0;
                sums[allFields['pay-spreadCost']] = sums[allFields.pay] - sums[allFields.spreadCost];
                sums[allFields.payUser] = this.footer.payUser;
                sums[allFields.thirdExchangeUser] = this.footer.thirdExchangeUser;
                return sums;
            });
        },
    },
    created() {
        this.initData();
    }
}
</script>

<style lang="scss" scoped>

</style>

